import { defineStore } from 'pinia'
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'

// UI状态管理
export const useUIStore = defineStore('ui', () => {
  const route = useRoute()

  // 当前激活的侧边栏工具
  const activeToolbarItem = ref<string>('chat')

  // 监听路由变化，同步activeToolbarItem
  watch(
    () => route.path,
    (newPath) => {
      const pathSegments = newPath.split('/')
      if (pathSegments.length >= 3 && pathSegments[1] === 'home') {
        const currentView = pathSegments[2]
        if (['chat', 'contacts', 'files', 'theme'].includes(currentView)) {
          activeToolbarItem.value = currentView
        }
      }
    },
    { immediate: true }
  )

  // 侧边栏是否展开（在小屏幕下可能收起）
  const isSidebarExpanded = ref(true)

  // 主题模式
  const theme = ref<'light' | 'dark'>('light')

  // 主题源（system-系统, light-浅色, dark-深色）
  const themeSource = ref<'system' | 'light' | 'dark'>('system')

  // 是否使用系统通知
  const useSystemNotification = ref<boolean>(true)

  // 窗口尺寸信息
  const windowSize = ref({
    width: 1000,
    height: 700
  })

  // 工具栏项目列表
  const toolbarItems = ref([
    {
      id: 'chat',
      icon: 'MessageCircle',
      name: '消息',
      badgeCount: 0
    },
    {
      id: 'contacts',
      icon: 'Users',
      name: '联系人',
      badgeCount: 2
    },
    {
      id: 'files',
      icon: 'Folder',
      name: '文件',
      badgeCount: 0
    },
    {
      id: 'theme',
      icon: 'Palette',
      name: '主题',
      badgeCount: 0
    }
  ])

  // 底部工具项目
  const bottomToolbarItems = ref([
    {
      id: 'devtools',
      icon: 'Settings',
      name: '开发者工具'
    },
    {
      id: 'collapse',
      icon: 'ChevronLeft',
      name: '折叠'
    },
    {
      id: 'logout',
      icon: 'LogOut',
      name: '登出'
    }
  ])

  // 是否是暗色主题
  const isDarkTheme = computed(() => theme.value === 'dark')

  // 设置激活的工具栏项
  const setActiveToolbarItem = (itemId: string): void => {
    activeToolbarItem.value = itemId
  }

  // 切换侧边栏展开状态
  const toggleSidebar = (): void => {
    isSidebarExpanded.value = !isSidebarExpanded.value
  }

  // 切换主题
  const toggleTheme = (): void => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }

  // 设置主题
  const setTheme = (newTheme: 'light' | 'dark'): void => {
    theme.value = newTheme
  }

  // 更新工具栏项目的徽章数量
  const updateToolbarBadge = (itemId: string, count: number): void => {
    const item = toolbarItems.value.find((item) => item.id === itemId)
    if (item) {
      item.badgeCount = count
    }
  }

  // 更新窗口尺寸
  const updateWindowSize = (width: number, height: number): void => {
    windowSize.value = { width, height }
  }

  // 切换系统通知设置
  const toggleSystemNotification = (): void => {
    useSystemNotification.value = !useSystemNotification.value
  }

  // 设置系统通知设置
  const setSystemNotification = (value: boolean): void => {
    useSystemNotification.value = value
  }

  return {
    activeToolbarItem,
    isSidebarExpanded,
    theme,
    themeSource,
    useSystemNotification,
    windowSize,
    toolbarItems,
    bottomToolbarItems,
    isDarkTheme,
    setActiveToolbarItem,
    toggleSidebar,
    toggleTheme,
    setTheme,
    toggleSystemNotification,
    setSystemNotification,
    updateToolbarBadge,
    updateWindowSize
  }
})
